// 主题（品牌）
@color-500: #6366f1;
@color-r: 99;
@color-g: 102;
@color-b: 241;

// 成功
@success-500: #22c55e;

// 警告
@warning-500: #f59e0b;

// 错误
@error-500: #ef4444;

// 信息
@info-500: #3b82f6;

// 中性色 500（灰阶中点）
@neutral-500: #737373;

// 生成 50-950
.generate-hues(@name, @base) {
  :root {
    --@{name}-50: mix(white, @base, 90%);
    --@{name}-100: mix(white, @base, 80%);
    --@{name}-200: mix(white, @base, 60%);
    --@{name}-300: mix(white, @base, 40%);
    --@{name}-400: mix(white, @base, 20%);
    --@{name}-500: @base;
    --@{name}-600: mix(black, @base, 20%);
    --@{name}-700: mix(black, @base, 35%);
    --@{name}-800: mix(black, @base, 50%);
    --@{name}-900: mix(black, @base, 65%);
    --@{name}-950: mix(black, @base, 80%);
  }

  :root.dark {
    --@{name}-50: mix(black, @base, 80%);
    --@{name}-100: mix(black, @base, 65%);
    --@{name}-200: mix(black, @base, 50%);
    --@{name}-300: mix(black, @base, 35%);
    --@{name}-400: mix(black, @base, 20%);
    --@{name}-500: @base;
    --@{name}-600: mix(white, @base, 20%);
    --@{name}-700: mix(white, @base, 40%);
    --@{name}-800: mix(white, @base, 60%);
    --@{name}-900: mix(white, @base, 80%);
    --@{name}-950: mix(white, @base, 90%);
  }
}

.generate-alpha-hues(@name, @r, @g, @b) {
  :root {
    --@{name}-a10: rgba(@r, @g, @b, 0.1);
    --@{name}-a20: rgba(@r, @g, @b, 0.2);
    --@{name}-a30: rgba(@r, @g, @b, 0.3);
    --@{name}-a40: rgba(@r, @g, @b, 0.4);
    --@{name}-a50: rgba(@r, @g, @b, 0.5);
    --@{name}-a60: rgba(@r, @g, @b, 0.6);
    --@{name}-a70: rgba(@r, @g, @b, 0.7);
    --@{name}-a80: rgba(@r, @g, @b, 0.8);
    --@{name}-a90: rgba(@r, @g, @b, 0.9);
  }
}

.generate-hues(primary, @color-500);
// .generate-hues(success, @success-500);
// .generate-hues(warning, @warning-500);
// .generate-hues(error,   @error-500);
// .generate-hues(info,    @info-500);
.generate-hues(neutral, @neutral-500);

.generate-alpha-hues(primary, @color-r, @color-g, @color-b);
